<template>
    <div class="PersonUserInfo">
        <div class="userInfo">
            <div class="info">
                <div class="item">
                    <el-avatar :size="68" :src="info.photoId_dictText"></el-avatar>
                    <div class="name">{{info.name}}</div>
                    <div class="other">
                        <span>{{info.age}}岁</span>
                        <span>{{info.eduLevel}}</span>
                        <span>{{info.workYears}}年</span>
                    </div>
                </div>
            </div>
            <div class="status">
                <router-link :to="{name:'PersonSendStatus',query:{active:0}}" class="item">
                    <div class="num">{{enter.deliveryNum}}</div>
                    <div class="title">已投递</div>
                </router-link>
                <router-link :to="{name:'PersonSendStatus',query:{active:1}}" class="item">
                    <div class="num">{{enter.interviewNum}}</div>
                    <div class="title">待面试</div>
                </router-link>
                <router-link :to="{name:'PersonSendStatus',query:{active:2}}" class="item">
                    <div class="num">{{enter.entryNum}}</div>
                    <div class="title">邀入职</div>
                </router-link>
            </div>
<!--            <el-button type="primary" class="uploadBtn" @click="UploadResume">上传简历</el-button>-->
            <div class="enter">
                <router-link :to="{name:'PersonResume'}" class="item">
                    <img src="../assets/userEnter-icon1.png">
                    <p>在线简历</p>
                </router-link>
                <!--                <div class="item">-->
                <!--                    @click="LookEnclosure"-->
                <!--                    <img src="../assets/userEnter-icon2.png">-->
                <!--                    <p>附件简历</p>-->
                <!--                </div>-->
                <router-link :to="{name:'PersonSendStatus',query:{active:3}}" class="item">
                    <img src="../assets/userEnter-icon3.png">
                    <p>我的收藏</p>
                </router-link>
            </div>
        </div>
        <div class="resume">
            <div class="online zhcn">
                <div class="title">在线中文简历</div>
                <div class="t">{{resumeZhcn.resumeName}}</div>
                <div class="other">
                    <div class="time">{{resumeZhcn.updateTime}} 更新</div>
                    <div class="btns">
                        <el-button type="text" @click="downloadResume(resumeZhcn.id)">下载</el-button>
                        <el-button type="text" @click="LookResume('PersonResumeLook',resumeZhcn.id)">预览</el-button>
                        <!-- <router-link class="look" target="_blank" :to="{name:'PersonResumeLook',query:{id: resumeZhcn.id}}"><i class="el-icon-view"></i>预览</router-link> -->
                        <el-button type="text" @click="resume()">编辑</el-button>
                    </div>
                </div>
            </div>
            <div class="online en">
                <div class="title">English Resume</div>
                <div class="t">{{resumeEn.resumeName}}</div>
                <div class="other">
                    <div class="time">Update by <template v-if="resumeEn.updateTime!='null'">{{resumeEn.updateTime}}</template></div>
                    <div class="btns">
                        <el-button type="text" @click="downloadResume(resumeEn.id)">下载</el-button>
                        <el-button type="text" @click="LookResume('PersonResumeEnLook',resumeEn.id)">预览</el-button>
                        <el-button type="text" @click="resumeAdd(resumeEn.id)">编辑</el-button>
                    </div>
                </div>
            </div>
            <div class="enclosure" v-if="resumeEnclosure.id">
                <div class="title">附件简历</div>
                <div class="item">
                    <div class="t">{{resumeEnclosure.resumeName}}</div>
                    <div class="btns">
                        <el-button type="text"  @click="downloadResumeFile">下载</el-button>
                        <el-button type="text" @click="LookEnclosure">预览</el-button>
                        <el-button type="text" @click="resumeDelete">删除</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {downloadResume, getSign, personInfo, personInfoEnterNum, resumeAdd, resumeDelete, resumeList} from '@/api/api'

export default {
    //组件注入
    components: {},
    inject: ['reload'],
    //存放数据
    data() {
        return {
            info: {},
            enter: {
                deliveryNum: 0,
                interviewNum: 0,
                    entryNum:0
                },
                resumeZhcn:{},
                resumeEn:{
                    id:'',
                    resumeName:'My resume',
                    updateTime:'null'
                },
                resumeEnclosure:{},//附件简历
                LookEnclosureFlag:false,
            }
        },
        //接受父组件传递的值
        props:{
            random: Number,
            required: true
        },
        //监控data中的数据变化
        watch: {
            random(val){
                setTimeout(()=>{
                    this.getUserInfo()
                },100)
            }
        },
        //方法集合
        methods: {
            downloadResumeFile(){
                let resumeEnclosure = this.resumeEnclosure;
                getSign({
                        'fileId':resumeEnclosure.fileId,
                    }).then(res =>{
                        if(res.code==200){
                            let sign = res.result
                            let a = document.createElement('a')
                            a.style.display = 'none'
                            a.href = resumeEnclosure.fileId_dictText+'?sign='+sign // 指定下载链接
                            a.download = "附件简历.pdf" // 指定下载文件名
                            a.click()
                            URL.revokeObjectURL(a.href) // 释放URL对象
                        }
                    });
            },
            downloadResume(id){
                console.log("下载id",id)
                downloadResume({
                    id: id
                }).then(response => {
                    console.log(response)
                    let header = response.headers['content-disposition']
                    header = header.split('filename=')[1]
                    const filename = decodeURI(decodeURI(header))
                    // const url = window.URL.createObjectURL(new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }))
                    const url = window.URL.createObjectURL(new Blob([response.data]))
                    const link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', filename)
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link)
                })
            },
            LookResume(url,id){
                if(id){
                    let routeData = this.$router.resolve({name:url,query:{
                        id: id
                    }})
                    window.open(routeData.href, '_blank');
                }
            },
            UploadResume(){
                this.$emit("UploadResume", {UploadResumeFlag:true})
            },
            //编辑中文简历
            resume(){
                this.$router.push({name:'PersonResume'})
            },
            //创建英文简历
            resumeAdd(id){
                console.log(id)
                if(id){
                   this.$router.push({name:'PersonResumeEn',query:{id:id}})
                }else{
                    resumeAdd({
                        'type': 0,
                        'lanType': 1,
                        'userId': this.info.userId,
                    }).then(res =>{
                        console.log(res);
                        if(res.code==200){
                            this.$router.push({name:'PersonResumeEn',query:{id:res.result.id}})
                        }
                    });
                }
            },
            //获取用户数据
            getUserInfo(){
                //有缓存
                if(localStorage.getItem('userInfo')){
                    this.info = JSON.parse(localStorage.getItem('userInfo'))
                }else{
                    //获取用户信息
                    personInfo({
                        'id': localStorage.getItem('userId')
                    }).then(res =>{
                        if(res.code==200){
                            localStorage.setItem('userInfo',JSON.stringify(res.result))
                        }
                    })
                }
            },
            //删除附件简历
            resumeDelete(){
                this.$confirm('删除后不可恢复，确认删除吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    resumeDelete({
                        'id': this.resumeEnclosure.id
                    }).then(res =>{
                        console.log(res);
                        if(res.code==200){
                            this.$message.success('删除成功');
                            localStorage.removeItem('resumeEnclosure')
                            this.reload();
                        }else{
                            this.$message.error(res.message);
                        }
                    });
                })
            },
            //获取简历列表
            getResumeList(){
                resumeList().then(res =>{
                    if(res.code==200){
                        let list = res.result.records
                        for(let i in list){
                            if(list[i].updateTime){
                                list[i].updateTime = list[i].updateTime.replace(/\-/g,".")
                                list[i].updateTime = list[i].updateTime.split(' ')[0]
                            }
                            if(list[i].lanType==0&&list[i].type==0){
                                this.resumeZhcn = list[i]
                            }else if(list[i].lanType==1){
                                this.resumeEn = list[i]
                            }else if(list[i].lanType==0&&list[i].type==1){
                                this.resumeEnclosure = list[i]
                                localStorage.setItem('resumeEnclosure',JSON.stringify(list[i]))
                            }
                        }
                    }else{
                        this.$message.error(res.message);
                    }
                });
            },
            //预览附件简历
            LookEnclosure(){
                let enclosure = JSON.parse(localStorage.getItem('resumeEnclosure'))
                if(enclosure){
                    this.$emit("LookEnclosure", {LookEnclosureFlag:true})
                }else{
                    this.$message.error('您还没有附件简历');
                }
            }
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {},
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            //判断登录状态
            if(this.userLoginFlag1()){
                //获取用户数据
                this.getUserInfo()
                //已投递 待面试 邀入职
                personInfoEnterNum().then(res =>{
                    if(res.code==200){
                        this.enter = res.result
                    }else{
                        this.$message.error(res.message);
                    }
                });
                //简历列表
                this.getResumeList()
            }
        }
    };
</script>
<style lang="scss">
    @mixin text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    @mixin text-ellipsisclamp($clamp){display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $clamp;overflow: hidden;}
    @mixin transition{transition: all .3s;}
    .PersonUserInfo{
        .userInfo{width: 100%;height: 420px;overflow: hidden;background: #fff;padding: 30px 20px;
            .info{height: auto;overflow: hidden;text-align: center;
                .name{font-size: 16px;color: #333;font-weight: bold;margin: 10px auto;}
                .other{text-align: center;
                    span{font-size: 12px;color: #999;display: inline-block;padding: 0 15px;position: relative;
                        &:after{content: "";width: 1px;height: 11px;background: #eee;position: absolute;right: 0;top: 4px;}
                        &:last-child:after{display: none;}
                    }
                }
            }
            .status{height: auto;overflow: hidden;text-align: center;border-top: 1px solid #f3f3f3;margin-top: 20px;padding-top: 20px;
                .item{display: inline-block;margin: 0 18px;
                    .num{font-size: 22px;color: #333;}
                    .title{font-size: 13px;color: #666;}
                }
            }
            .uploadBtn{width: 100%;height: 45px;line-height: 45px;font-size: 14px;color: #fff;border-radius: 0;text-align: center;margin: 20px 0;@include transition()}
            .enter{height: auto;overflow: hidden;text-align: center;margin-top: 10px;
                .item{width: 33%;display: inline-block;overflow: hidden;cursor: pointer;
                    img{width: 30px;height: 30px;margin: 0 auto;}
                    p{font-size: 12px;color: #666;@include transition()}
                    &:hover p{color: #E54437;}
                }
            }
        }
        .resume{height: auto;overflow: hidden;background: #fff;padding: 20px;margin-top: 15px;
            .title{font-size: 18px;color: #333;margin-bottom: 15px;}
            .online{height: auto;overflow: hidden;margin-top: 30px;
                .t{font-size: 14px;font-weight: bold;color: #333;margin-bottom: 5px;}
                .other{height: auto;overflow: hidden;
                    .time{font-size: 14px;color: #aaa;float: left;}
                    .btns{height: auto;overflow: hidden;float: right;
                        button{line-height: normal;height: auto;padding: 0;border: 0;color: #999;@include transition();margin-left: 15px;
                            a{color: #999;
                                &:hover{color: #E54437;}
                            }
                            &:hover{color: #E54437;}
                        }
                    }
                }
                &:first-child{margin: 0}
            }
            .enclosure{height: auto;overflow: hidden;margin-top: 30px;
                .t{font-size: 14px;font-weight: bold;color: #333;margin-bottom: 5px;float: left;}
                .btns{height: auto;overflow: hidden;float: right;
                    button{line-height: normal;height: auto;padding: 0;border: 0;color: #999;@include transition();margin-left: 15px;
                        a{color: #999;}
                        &:hover{color: #E54437;}
                    }
                }
            }
        }
    }
</style>
